<template>
  <div class="data">
    <h2 style="text-align: center">角色管理</h2>
    <!-- 检索 -->
    <div class="sift">
      <div class="siftitems">
        <span style="margin-right: 10px">名称</span>
        <el-input v-model="dataBaseName"></el-input>
        <el-button type="primary" size="'default'">查询</el-button>
        <el-button type="info" @click="reset()">重置</el-button>
      </div>
    </div>
    <!-- 分割线 -->
    <hr style="width: 100%; height: 1px; margin-top: 20px" />
    <!-- 弹出按钮，弹出框 -->
    <div class="sifibtn">
      <div style="text-align: center">
        <el-button type="primary" @click="addPermission.isShow = true"
          >添加</el-button
        >
        <!-- 添加弹出框 -->
        <el-dialog
          v-model="addPermission.isShow"
          width="35%"
          title="添加角色"
          destroy-on-close
        >
          <el-form :model="form" label-width="120px" :rules="rules">
            <el-form-item label="角色名称" prop="userName">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="唯一编码" prop="uniqueEncoding">
              <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.resource" >
                <el-radio label="正常" />
                <el-radio label="停用" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
              <div style="margin-left: 70px">
                <el-button type="primary" @click="addPermission()"
                  >确定</el-button
                >
                <el-button>取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <el-button
        style="margin-left: 15px"
        type="danger"
        @click="this.deletePermission()"
        >删除</el-button
      >
    </div>
    <!-- 表单 -->
    <div class="table">
      <el-table
        :data="$store.state.authTable"
        border
        class="shadow roundy-20"
        size="large"
        style="width: 100%; z-index: 0;"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column width="50px">
          <template #default="{ row }">
            <el-checkbox v-model="row.isChecked" />
          </template>
        </el-table-column>

        <el-table-column label="名称" width="200px">
          <template #default="{ row }">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="唯一编码" width="200px">
          <template #default="{ row }">
            <span>{{ row.code }}</span>
          </template>
        </el-table-column>

        <el-table-column label="描述">
          <template #default="{ row }">
            <span>{{ row.info }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="80px">
          <template #default="{ row }">
            <span>{{ row.status }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px">
          <template #default>
            <div class="action">
              <!-- <a @click="assign(row)">{{
                row.action[1]
              }}</a> -->
              <!-- 编辑弹窗 -->
              <el-dialog
                v-model="assignPermissions.isShow"
                width="35%"
                title="编辑"
                :modal="false"
                destroy-on-close
              >
                <el-form
                  :data="this.assignPermissions.form"
                  :model="assignPermissions.form"
                  label-width="120px"
                >
                  <el-form-item label="角色名称">
                    <el-input v-model="assignPermissions.form.userName" />
                  </el-form-item>
                  <el-form-item label="唯一编码">
                    <el-input v-model="assignPermissions.form.uniqueEncoding" />
                  </el-form-item>

                  <el-form-item label="状态">
                    <el-radio-group v-model="assignPermissions.form.status">
                      <el-radio label="正常" />
                      <el-radio label="停用" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input v-model="assignPermissions.form.desc" type="textarea" />
                  </el-form-item>
                  <div style="margin-left: 70px">
                    <el-button type="primary">确定</el-button>
                    <el-button>取消</el-button>
                  </div>
                </el-form>
              </el-dialog>
              <!-- <a @click="deleteRow(row)">{{ row.action[2] }}</a> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="demo-pagination-block">
      <el-pagination
        :current-page="page.pageNum"
        :page-size="page.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// import request from '@/utils/request';
export default {
  name: "PermissionManagePage",
  data() {
    return {
      //添加弹窗
      addPermission: {
        isShow: false,
      },

      PermissionForm: [
        {
          isChecked: true,
          userName: "普通用户",
          uniqueEncoding: "normal",
          description: "只有基本查看功能",
          status: "正常",
          action: ["分配权限", "编辑", "删除"],
        },
        {
          isChecked: false,
          userName: "超级管理员",
          uniqueEncoding: "admin",
          description: "系统默认最高权限，可以编辑、修改和删除",
          status: "正常",
          action: ["分配权限", "编辑", "删除"],
        },
      ],
      //分配权限弹窗
      assignPermissions: {
        isShow: false,
        form: {
          userName: "",
          uniqueEncoding: "",
          status: "",
          desc: "",
        },
      },
      /* 服务器传来的数据源数据 */
      serverData: [],
      page: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      //弹窗标题
      dialogTitle: "",
      addShow: false,
      updateShow: false,
      systemName: "",
      dataBaseName: "",
      //下拉框
      value: "",
      //消息弹框
      dialogVisible: false,
      //表单校验
      form: {
        userName: "",
        uniqueEncoding: "",
        status:"",
      },
      //校验规则
      rules: {
        userName: {
          required: true,
          message: "角色名称不得为空",
          trigger: "blur",
        },
        uniqueEncoding: {
          required: true,
          message: "唯一编码不得为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "唯一编码不得为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    //编辑
    assign(row){
      this.assignPermissions.isShow=true
      let data={}
      data=row
      this.assignPermissions.form=data
    },
    //批量删除
    deletePermission() {
      this.PermissionForm = this.PermissionForm.filter(
        (item) => !item.isChecked
      );
    },
    //单个删除
    deleteRow(data) {
      const index = this.PermissionForm.findIndex(
        (item) => item.uniqueEncoding === data.uniqueEncoding
      );
      if (index !== -1) {
        this.PermissionForm.splice(index, 1);
      }
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;

      this.searchDatabaseSource();
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;

      this.searchDatabaseSource();
    },
    //添加源弹窗
    showDialog() {
      this.clearFrom();
      this.dialogVisible = true;
      this.addShow = true;
      this.updateShow = false;
      this.dialogTitle = "添加数据源";
    },
    //修改数据源
    updateOrigin(data) {
      this.dialogVisible = true;
      this.updateShow = true;
      this.addShow = false;
      this.formInline = Object.assign({}, data);
      this.dialogTitle = "修改数据源";
    },
    clearFrom() {
      for (let index in this.formInline) {
        this.formInline[index] = "";
      }
    },
    //表单验证
    resetForm() {
      this.$refs.form.resetFields();
    },
    /* 修改数据格式 */
    dataFormat() {
      this.serverData.forEach((element) => {
        if (element != undefined && element != null) {
          element.isChecked = false;
          element.dataBaseType = element.dbType;
          element.dataBaseIp = element.dbIp;
          element.dataBaseName = element.dbName;
          element.port = element.dbPort;
          element.note = element.dbInfo;
        }
      });
      return this.serverData;
    },

    /* 重置 */
    reset() {
      this.dataBaseName = "";
      this.systemName = "";
      this.value = "";
      this.getAllSource();
      this.page.pageNum = 1;
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.data {
  display: flex;
  flex-direction: column;
  width: 100%;

  .sift {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
  }
}
.siftitems {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
span {
  white-space: nowrap;
}
.sifibtn {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}
.table {
  width: 100%;
  margin-top: 20px;
}
.form-inline {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  align-items: center;
}

.from-inline-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.highlight {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.demo-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.action {
}
.action a {
  position: relative;
  color: rgb(0, 38, 255);
  padding: 5px;
  
}
a:hover{
  cursor: pointer;
}
</style>
